<template>
	<view class="evaluate">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="我要评价"></tab-top>
		<!-- #endif -->
		<view class="header">
			<view class="box">
				<image class="box-img" :src="info.clean_info.account_info.head_images|| '/static/bg/img.png'"></image>
				<view class="item">
					<view class="name">{{info.clean_info.name}}</view>
					<view class="sky">{{info.clean_info.say}}</view>
				</view>
			</view>
			<view class="btn1" v-if="info.follow == '0'" @tap="fans(item)">+关注</view>
			<view class="btn2" v-if="info.follow == '1'">已关注</view>
		</view>
		<view class="title"><textarea v-model="content" auto-height placeholder="我有话说..."></textarea></view>
		<view class="logoImg_img">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item, index) in image" :key="index" @tap="ViewImage" :data-url="image[index]">
					<image class="image" :src="image[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" style="border-radius: 50%;padding: 6upx;" @tap.stop="DelImg" :data-index="index">
						<text class="cuIcon-close" style="color: #fff;"></text>
					</view>
				</view>
				<view class="solids" @tap="changeImg(false)" v-if="image.length < 9"><text class="lg text-gray cuIcon-camera"></text></view>
			</view>
		</view>
		<view class="bg"></view>
		<view class="box_">
			<view v-if="clean_grade == 0">为您的保洁打分</view>
			<view v-if="clean_grade == 1">极差</view>
			<view v-if="clean_grade == 2">差</view>
			<view v-if="clean_grade == 3">较满意</view>
			<view v-if="clean_grade == 4">满意</view>
			<view v-if="clean_grade == 5">非常满意</view>
			<view class="star">
				<uni-rate size="20" color="#e5e5e5" margin="10" :value="value" max="5" @change="star"></uni-rate>
			</view>
			<view>夸夸保洁吧~</view>
			<view class="box-btn">
				<view class="btn-item" v-for="(item, index) in btnItem" :key="index" 
				:class="{ blue: flag(item) != -1}" @tap="blue(item,index)">{{ item.tag_name }}</view>
			</view>
		</view>
		<view class="btn" @tap="evaluate">提交评价</view>
		<jc-popUp position="bottom" ref="pop" markTapHide="true">
			<view class="footer">
				<view class="item">确定关注此人?</view>
				<view class="item" @tap="total(1)">确定</view>
				<view class="item" @tap="total(0)">取消</view>
			</view>
		</jc-popUp>
	</view>
</template>

<script>
import jcPopUp from '@/components/jc-popUp/jc-popUp.vue';
import uniRate from '@/components/uni-rate/uni-rate.vue';
import qiniuUpload from '@/common/qiniuUpload.js';
export default {
	data() {
		return {
			info: {},
			btnItem: [],
			clean_tag:[],
			item: '',
			content: '',
			image: [],
			clean_grade: 0,
			data:''
		};
	},
	async onLoad(e) {
		/**
		 * 初始化评价信息
		 */
		let data = JSON.parse(e.data);
		this.data = data;
		let [_evaluateCreate, evaluateCreate] = await this.evaluateCreate(data);
		if (_evaluateCreate || evaluateCreate.data.status == 0) {
			this.showToast('获取信息失败，请稍后重试');
			return;
		}
		this.info = evaluateCreate.data.data.info;
		for (let item in evaluateCreate.data.data.info.evaluate_tag) {
			this.btnItem.push(evaluateCreate.data.data.info.evaluate_tag[item])
		}
	},
	methods: {
		flag(item){
			return this.clean_tag.indexOf(item)
		},
		fans(item) {
			/**
			 * 弹出层
			 */
			this.$refs.pop.show();
			this.item = item;
		},
		evaluate(){
			/**
			 * 提交评价
			 */
			if(this.formValidation()){
				return;
			}
			let clean_tag = [];
			this.clean_tag.forEach(v=>{
				clean_tag.push(v.id)
			})
			this.getReq({
				url:'both/evaluate',
				method:'POST',
				data:{
					hotel_id:this.data.hotel_id,
					clean_id:this.data.clean_id,
					order_id:this.data.order_id,
					order_status_id:this.data.order_status_id,
					content:this.content,
					image:this.image,
					clean_grade:this.clean_grade,
					clean_tag:clean_tag
				}
			}).then(v=>{				
				if(v[1].data.status == 0){
					this.showToast('评价失败');
					return;
				}
				this.showToast('评价成功');
				setTimeout(()=>{
					uni.navigateBack();
				},1500)
			})
		},
		evaluateCreate(data) {
			/**
			 * 初始化评价
			 */
			return this.getReq({
				url: 'both/evaluate/create',
				data: data
			});
		},
		DelImg(e) {
			/**
			 * 删除图片
			 */
			console.log(e);
			this.image.splice(e.currentTarget.dataset.index, 1);
		},
		star(e) {
			this.clean_grade = e.value;
		},
		blue(item,index) {
			for(let i = 0;i<this.clean_tag.length;i++ ){
				if(this.clean_tag[i] == item){
					this.clean_tag.splice(i,1)
					return;
				}
			}
			this.clean_tag.push(item)
		},
		ViewImage(e) {
			/**
			 * 预览图片
			 */
			uni.previewImage({
				urls: this.image,
				current: e.currentTarget.dataset.url
			});
		},
		attention() {
			return this.getReq({
				url: 'both/listSetup',
				method: 'POST',
				data: {
					host_id: this.data.hotel_id,
					guest_id: this.data.clean_id,
					setup_type: 1,
					app_type: 2
				}
			});
		},
		async total(e) {
			/**
			 * 关注
			 */
			if (!e) {
				//取消关注
				this.$refs.pop.hide();
				return;
			}
			let [_fans, fans] = await this.attention();
			if (_fans || fans.data.status == 0) {
				return;
			}
			uni.$emit('fans')
			// this.item.mutual_concern = 1;
			this.$refs.pop.hide();
			this.showToast('已关注');
		},
		async changeImg(show) {
			/**
			 * 获取七牛云图片链接
			 */
			let [_chooseImage, chooseImage] = await uni.chooseImage({ count: 1 });
			if (_chooseImage) {
				return;
			}
			let images = chooseImage.tempFilePaths[0];
			let key = 'hotel:' + new Date().getTime() + '.png'; //图片名称
			let qiniuImg = await this.qiniuUpload(images, key);
			if (show) {
				// 图片为hotel_logo
				this.hotel_logo = qiniuImg.imageURL;
				return;
			}
			//图片为hotel_image 数组
			this.image.push(qiniuImg.imageURL);
			console.log(this.image);
		},
		formValidation(){
			if(!this.content){
				this.showToast('请填写评价内容！');
				return true;
			}
			if(!this.image){
				this.showToast('请上传图片！');
				return true;
			}
			if(!this.clean_grade){
				this.showToast('请选择星级！');
				return true;
			}
			if(!this.clean_tag){
				this.showToast('请选择标签！');
				return true;
			}
			return false;
		}
	},
	components: { jcPopUp, uniRate }
};
</script>

<style lang="scss" scoped>
@import '../../../common/css/icon.css';
@import '../../../common/css/main.css';
.evaluate {
	width: 750upx;
	.header {
		width: 702upx;
		height: 210upx;
		padding: 0 24upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.box-img {
				width: 120upx;
				height: 120upx;
				border-radius: 50%;
				margin-right: 34upx;
			}
			.item {
				.name {
					font-size: 32upx;
					color: #333333;
					line-height: 64upx;
				}
				.sky {
					font-size: 24upx;
					line-height: 44upx;
					color: #999999;
				}
			}
		}
		.btn1 {
			width: 120upx;
			height: 50upx;
			border-radius: 8upx;
			border: solid 1upx #3595f9;
			font-size: 28upx;
			line-height: 50upx;
			text-align: center;
			color: #3595f9;
		}
		.btn2 {
			width: 120upx;
			height: 50upx;
			border-radius: 8upx;
			border: solid 1upx #e5e5e5;
			font-size: 28upx;
			color: #999999;
			line-height: 50upx;
			text-align: center;
		}
	}
	.title {
		width: 750upx;
		height: 210upx;
		background-color: #f8f8f8;
		padding: 24upx;
		font-size: 24upx;
		textarea{
			width: 100%;
		}
	}
	.logoImg_img {
		widows: 702upx;
		padding: 24upx 24upx 0 24upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.bg {
		width: 750upx;
		height: 20upx;
		background-color: #f0f0f0;
	}
	.box_ {
		padding-bottom: 50upx;
		font-size: 24upx;
		color: #999999;
		line-height: 72upx;
		text-align: center;
		.star {
			width: 750upx;
			height: 116upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.box-btn {
			padding: 0 92upx;
			height: 186upx;
			text-align: center;
			line-height: 60upx;
			display: flex;
			flex-wrap:wrap;
			.btn-item:nth-last-child(1) {
				margin-right:0;
			}
			.btn-item {
				width: 160upx;
				height: 60upx;
				border-radius: 8upx;
				border: solid 1upx #e5e5e5;
				margin-right:29upx;
			}
			.blue {
				width: 160upx;
				height: 60upx;
				border-radius: 8upx;
				color: #3595f9;
				border: solid 1upx #3595f9;
			}
		}
	}
	.btn {
		margin: 50upx auto;
		width: 540upx;
		height: 90upx;
		background-color: #3595f9;
		border-radius: 8upx;
		font-size: 32upx;
		color: #ffffff;
		text-align: center;
		line-height: 90upx;
	}
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750upx;
		height: 320upx !important;
		background-color: #ffffff;
		.item:nth-child(1) {
			font-size: 24upx;
			color: #999999;
			border-bottom: 1upx solid #e5e5e5;
		}
		.item:nth-child(2) {
			border-bottom: 19upx solid #e5e5e5;
		}
		.item {
			height: 100upx;
			line-height: 100upx;
			font-size: 28upx;
			text-align: center;
			box-sizing: content-box;
		}
	}
}
</style>
